import React, { FC, useState, useRef } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { OrderContext, useOrderExhibitionList } from '@/pages/MyOrder/MyOrderContext';
import { useOptionsRender } from '@/pages/MyOrder/MyOrderContent/MyOrderContentOption';
import { Tabs, Swiper } from 'antd-mobile';
import { SwiperRef } from 'antd-mobile/es/components/swiper';
import WillPayList from '@/pages/MyOrder/MyOrderContent/WillPayList/WillPayList';
import PayedList from '@/pages/MyOrder/MyOrderContent/PayedList/PayedList';
import CancleList from '@/pages/MyOrder/MyOrderContent/CancleList/CancleList';
import AllOrderList from '@/pages/MyOrder/MyOrderContent/AllOrderList/AllOrderList';
import RootPageComponent from '@/pages/components/RootPageComponent/RootPageComponent';
import OrderTabs from './OrderTabs/OrderTabs';
import RootPageComponentGotoMenu from '@/pages/components/RootPageComponentGotoMenu/RootPageComponentGotoMenu';
export interface IProps extends ICompProps {}
MyOrder.defaultProps = {} as Partial<IProps>;
function MyOrder(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('MyOrder', className);
    const [activeIndex, setActiveIndex] = useState(0);
    // const [swiperRef,setSwiperRef] = useState(null);
    const swiperRef = useRef<SwiperRef>(null);
    const tabItems = [
        { key: 'all', title: '全部订单', componentval: 'AllOrderList' },
        { key: 'willpay', title: '待付款', componentval: 'WillPayList' },
        { key: 'payed', title: '已付款', componentval: 'PayedList' },
        { key: 'canceled', title: '已取消', componentval: 'CancleList' },
    ];
    const chooseOption = (type, height) => {
        let comp = null;
        switch (type) {
            case 'AllOrderList':
                comp = <AllOrderList style={{ height: height + 'px' }}></AllOrderList>;
                break;
            case 'WillPayList':
                comp = <WillPayList style={{ height: height + 'px' }}></WillPayList>;
                break;
            case 'PayedList':
                comp = <PayedList style={{ height: height + 'px' }}></PayedList>;
                break;
            default:
                comp = <CancleList style={{ height: height + 'px' }}></CancleList>;
        }
        return comp;
    };
    return (
        <OrderContext.Provider value={{ activeIndex, setActiveIndex, tabItems, swiperRef }}>
            <RootView className={localClassName} style={style}>
                <RootPageComponent
                    enableExpand={false}
                    leftTitle="我的订单"
                    scrollOffsetBottom={0}
                    headFixedSlot={<OrderTabs></OrderTabs>}
                    headNavContentRightSlot={<RootPageComponentGotoMenu />}>
                    {({ height }) => (
                        <Swiper
                            style={{ height }}
                            className="swipercontent"
                            direction="horizontal"
                            loop
                            indicator={() => null}
                            ref={swiperRef}
                            defaultIndex={activeIndex}
                            onIndexChange={(index) => {
                                setActiveIndex(index);
                            }}>
                            {tabItems.map((item) => (
                                <Swiper.Item key={item.key}>{chooseOption(item.componentval,height)}</Swiper.Item>
                            ))}
                        </Swiper>
                    )}
                </RootPageComponent>
            </RootView>
        </OrderContext.Provider>
    );
}
export default React.memo(MyOrder as FC<IProps>);
const RootView = styled(View)`
    &.MyOrder {
    }
`;
